<template>
	<view class="content">
		<view class="homeHeader">
			<view class="homeHeaderLeft flex flex-align">
				<image class="logo" :src="config?config.scan.share_img:'/static/logo.png'" mode="widthFix" />
				<text class="homeHeaderTitle">{{config.site_name}}</text>
			</view>
			<view class="homeHeaderNotice flex flex-align">
				<image class="noticeImg" src="/static/home/home01.png" mode="widthFix" />
				<view class="noticeText">
					<swiper class="swiper" :circular="true" :vertical="true" :indicator-dots="false" :autoplay="true"
						:interval="3000" :duration="1000">
						<swiper-item v-for="(item, index) in noticeList" :key="index">
							<view class="swiper-item">
								<text class="one-omit">{{ item.name }}</text>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="homeHeaderTab flex-line flex-align">
				<view v-for="(item, index) in tabList" :key="index"
					:class="tabActive === index ? 'tabItem active' : 'tabItem'" @click="tabChange(index)">
					<view class="tabItemTitle flex flex-align flex-center"><text>{{ item.name }}</text></view>
					<view class="tabItemNum">{{ item.num }}</view>
				</view>
			</view>
		</view>
		<view class="homeLiveList">
			<view v-if="list.length>0" class="homeLiveItem flex" v-for="(item, index) in list" :key="index"
				@click="goUrl('/pagesA/live/liveDetail?liveid='+item.id+'&inviter_code='+dataInfo.inviter_code, true)">
				<view class="homeLiveItemImg">
					<image :src="item.cover" />
				</view>
				<view class="homeLiveItemText flex-column flex flex-bt">
					<view class="text_two">{{item.name}}</view>
					<view class="text_one">{{item.start_date_time}}开播</view>
				</view>
			</view>
			<view v-else class="noData" style="margin-top: 15vh;">
				<image src="/static/nodata/nodata01.png" />
				<view class="noDataText">暂无数据</view>
			</view>
		</view>
		<tabBar :tabActive="0"></tabBar>
	</view>
</template>

<script setup lang="ts">
import { onLoad, onReachBottom, onReady } from '@dcloudio/uni-app'
import { computed, nextTick, ref } from 'vue'
import { goUrl, wechatSdkConfig } from '@/utils/index'
import { useUserStore } from '@/store/modules/user'
import API_LIVE from '@/api/live'
const userStore = useUserStore()
const tabActive = ref(0)
const config = computed(()=>{
	return userStore.config
})
const dataInfo = computed(()=>{
	return userStore.userInfo
})
onReady(() => {
	uni.hideTabBar()
})
const noticeList = ref()

const tabList = ref([
	{
		name: '直播间',
		num: '精彩不容错过'
	},
	{
		name: '回放室',
		num: '直播回放视频'
	}
])
const tabChange = (index: number) => {
	tabActive.value = index
	if(index == 0){
		getList()
	}else if(index == 1){
		getPlaybackList()
	}else {
		list.value = []
	}
}
const list = ref<any>('')
onLoad(() => {
	if(userStore.config){
  		config.value = userStore.config
		noticeList.value = config.value.notify.list
	}
	if(userStore.token){
		getList()
		// #ifdef H5
		const option ={
		shareTitle: userStore.config.scan.title,
		shareLink:location.href.split('#')[0]+'#/inviter_code='+userStore.userInfo.inviter_code,
		shareImage: userStore.config.scan.share_img,
		shareDesc:userStore.config.scan.desc
		}
		wechatSdkConfig(option)
		// #endif
	}
})
const getList = () => {
	API_LIVE.roomList().then((res:any) => {
		list.value = res.list
	})
}
const getPlaybackList = () => {
	API_LIVE.playbackList().then((res:any) => {
		list.value = res.list
	})
}
</script>

<style lang="scss" scoped>
.content {
	background: url('@/static/home/home06.png') no-repeat;
	background-size: 100%;
}
.homeHeader {
	width: 100%;
	position: relative;
	z-index: 11;

	.homeHeaderTab {
		font-size: 26rpx;
		margin-top: 50rpx;
		padding: 0 30rpx;

		.tabItem {
			width: 25%;
			text-align: center;

			.tabItemTitle {
				font-size: 26rpx;
				margin-bottom: 5rpx;
				color: #224473;

				text {
					background: transparent;
					padding: 2rpx 20rpx 6rpx;
					border-radius: 20rpx;
				}
			}

			.tabItemNum {
				font-size: 24rpx;
				color: #42609C;
			}
		}

		.tabItem.active {
			.tabItemTitle {
				color: #fff;

				text {
					background: linear-gradient(to right, #459DFF, #663AFF);
					padding: 2rpx 20rpx 6rpx;
					border-radius: 20rpx;

				}
			}

			.tabItemNum {
				color: #fff;
			}
		}

	}

	.homeHeaderLeft {
		padding: 90rpx 30rpx 20rpx;
		box-sizing: border-box;

		.logo {
			width: 100rpx;
			height: 100rpx;
			border-radius: 100%;
			margin-right: 10rpx;
		}

		.homeHeaderTitle {
			font-size: 36rpx;
			color: #fff;
			font-weight: bold;
		}

	}

	.homeHeaderNotice {
		height: 50rpx;
		margin: 20rpx 30rpx;
		padding: 10rpx 20rpx;
		position: relative;
		background: #fff;
		border-radius: 40rpx;

		.noticeText {
			width: 100%;
			height: 50rpx;
			font-size: 28rpx;

			.swiper {
				width: 100%;
				height: 100%;

				.swiper-item {
					display: flex;
					align-items: center;
					width: 100%;
					height: 100%;

					text {
						font-size: 28rpx;
						color: #333;
					}
				}
			}
		}

		.noticeImg {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
	}

	.homeHeaderBj {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.homeHeaderTitle {
		font-size: 36rpx;
		color: #333;
	}
}

.homeLiveList {
	margin-top: 30rpx;
	padding: 0 30rpx 10rpx;

	.homeLiveItem {
		background: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;

		.homeLiveItemImg {
			width: 370rpx;
			margin-right: 20rpx;
			height: 160rpx;

			image {
				width: 100%;
				border-radius: 20rpx;
				height: 100%;
			}
		}

		.homeLiveItemText {
			box-sizing: border-box;

			.text_two {
				font-size: 28rpx;
				width: 400rpx;
				color: #333;
			}

			.text_one {
				font-size: 24rpx;
				color: #969799;
			}


		}

	}
}

/* 添加吸顶时的样式（如果需要自定义） */
::v-deep .sticky-active {
	background-color: rgba(255, 255, 255, 0.8);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	padding-bottom: 20rpx;

	.tabItem.active {
		.tabItemNum {
			color: #42609C !important;
		}
	}

}
</style>